<template>
  <cover-view class="container" v-if="showFlag">
    <cover-image class="wifiImg" src="/static/img_NoNetwork.png" />
    <cover-view class="wifiDes">网络出问题了，快去检查一下吧~</cover-view>
  </cover-view>
</template>
<script setup lang="ts">
const props = defineProps<{
  showFlag: boolean
}>()
const emit = defineEmits<{
  (e: 'refresh'): void
}>()

watch(
  () => props.showFlag,
  (newVal, oldVal) => {
    if (oldVal && !newVal) {
      emit('refresh')
    }
  }
)
</script>
<style lang="less">
.container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: #fff;
}
.error {
  position: absolute;
  top: 0;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  background: #e64340;
  opacity: 0.9;
}
.wifiImg {
  margin-top: 320rpx;
  width: 550rpx;
  height: 428rpx;
}
.wifiDes {
  margin-top: 30rpx;
  color: #656b7b;
  font-size: 32rpx;
}
.refresh {
  margin-top: 200rpx;
  width: 70%;
  height: 96rpx;
  line-height: 96rpx;
  color: #fff;
  border-radius: 60rpx;
  background-image: linear-gradient(24deg, rgba(68, 117, 213, 0.75) 0%, #4475d5 100%);
  text-align: center;
  font-size: 32rpx;
}
</style>
